<script setup>
import {ref} from "vue";
import router from "@/router";

const newsIndex = ref(1)

const carousel = ref()

const carouselIndex = ref(0)

const carouselChange =(curIndex,preIndex)=>{
  carouselIndex.value = curIndex;
}

const setActiveItem =(index)=>{
  carousel.value.setActiveItem(index)
}


</script>

<template>
  <div>
    <div id="modular-1">
      <el-row :gutter="10" class="box" style="width: 1275px; height: 430px; padding: 45px; margin: 0 auto;position: relative;top: 1128px;z-index: 99;">
        <el-col :span="4" style="margin-right: 12px;">
          <img src="/index-imgs/box1-picture1.png" style="width: 192px;">
          <router-link to="@">
            <img src="/index-imgs/box1-button1.jpg" @click="" style="width: 192px; margin-top: 11px;">
          </router-link>
        </el-col>
        <el-col :span="14" style="margin-right: 12px;">
          <img src="/index-imgs/box1-picture2.png" style="height: 32px;">
          <el-carousel>
            <el-carousel-item v-for="item in 2">
              <img :src="'/index-imgs/box1-banner'+item+'.png'" style="width: 100%;height: 100%;">
            </el-carousel-item>
          </el-carousel>
        </el-col>
        <el-col :span="5">
          <ul style="margin-top: 32px;">
            <li id="date1">
              <div style="float: left; font-size: 23px; color: #fff;font-weight: bold;position: relative; top: 60px;left: 40px;">2月</div>
              <div style="float: right;width: 160px;text-align: center;position: relative;top: 50%;transform: translate(0, -50%);">
                <p style="font-size: 28px;color: #fff;font-weight: bold;margin: 0;">重拾自己的信念</p>
                <p style="margin: 0;color: #fff">全新A忍登场</p>
              </div>
            </li>
            <li id="date2" style="margin-top: 32px;">
              <div style="float: left; font-size: 23px; color: #fff;font-weight: bold;position: relative; top: 60px;left: 40px;">2月</div>
              <div style="float: right;width: 160px;text-align: center;position: relative;top: 50%;transform: translate(0, -50%);">
                <p style="font-size: 28px;color: #fff;font-weight: bold;margin: 0;">木遁高手</p>
                <p style="margin: 0;color: #fff;">全新B忍登场</p>
              </div>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div id="modular-2" style="height: 1600px; padding: 0;margin: 0; width: 100%;">
      <div class="box2">
        <img class="box-title" src="/index-imgs/box2-title.png" style="padding: 60px 0 30px">
        <el-row :gutter="10" class="box" style="width: 1275px; height: 436px;margin: 0 auto;">
          <el-col :span="16" >
            <!---------------------轮播图开始-------------------------->
            <div id="app" style="width: 797px;height: 340px; position: absolute;top: 50px;left: 40px;">
              <div class="box2-banner" style="width: 100%;height: 100%;">
                <el-carousel ref="carousel" height="340px" @change="carouselChange">
                  <el-carousel-item v-for="item in 4" :key="item" style="width: 100%;height: 400px;">
                    <h3 class="small justify-center" text="2xl">
                      <img :src="'/index-imgs/box2-banner'+item+'.png'" style="">
                    </h3>
                  </el-carousel-item>
                </el-carousel>

                <div class="indicator">
                  <a @click="setActiveItem(0)" :class="{'active': carouselIndex===0}">我爱罗[新春限定]</a>
                  <a @click="setActiveItem(1)" :class="{'active': carouselIndex===1}">大和[新春限定]</a>
                  <a @click="setActiveItem(2)" :class="{'active': carouselIndex===2}">千手柱间[木叶创立]</a>
                  <a @click="setActiveItem(3)" :class="{'active': carouselIndex===3}">萨姆依[新春限定]</a>
                </div>
              </div>
            </div>
            <!---------------------轮播图结束-------------------------->
          </el-col>
          <el-col :span="8" style="width: 390px; margin-top: 50px; overflow: hidden;position: relative;">
              <div style="position: relative;">
                <a @mouseover="newsIndex=1" :class="{'box2-tab':true, 'active':newsIndex===1}">公告</a>
                <a @mouseover="newsIndex=2" :class="{'box2-tab':true, 'active':newsIndex===2}">新闻</a>
                <a @mouseover="newsIndex=3" :class="{'box2-tab':true, 'active':newsIndex===3}">赛事</a>
                <router-link to="/info">
                  <a id="box2-more"></a>
                </router-link>
              </div>
              <div v-if="newsIndex===1" class="box2-content" style="overflow: hidden; height: 300px;">
                <div style="position: relative; left: 13px; top: 10px;">
                  <img src="/index-imgs/box2-picture6.png" style="position: absolute;z-index: 100">
                  <div style="background-color: #67410f;height: 57px; width: 365px;position: absolute;top: 15px;z-index: 10">
                    <p class="box2-content-box">
                      2月15日更新公告，新春活动精彩继续
                    </p>
                    <p style="color: #fff; margin: 0;position: absolute; right: 5px;bottom: 3px;font-size: 15px;">02-15</p>
                  </div>
                  <ul>
                    <li class="box2-list" style="top: 100px;">
                      <span class="box2-list-type">公告</span>
                      <p class="box2-list-title">2月8日更新公告，我爱罗「新春限定」登场</p>
                      <span class="box2-list-date">02-08</span>
                    </li>
                    <li class="box2-list" style="top: 140px;">
                      <span class="box2-list-type">公告</span>
                      <p class="box2-list-title">2月1日更新公告，新春活动开启</p>
                      <span class="box2-list-date">02-01</span>
                    </li>
                    <li class="box2-list" style="top: 180px;">
                      <span class="box2-list-type">公告</span>
                      <p class="box2-list-title">1月25日更新公告，全新长赛季「火影之名」来袭</p>
                      <span class="box2-list-date">01-25</span>
                    </li>
                    <li class="box2-list" style="top: 220px;">
                      <span class="box2-list-type">公告</span>
                      <p class="box2-list-title">1月18日更新公告，火影之名长赛季即将开启</p>
                      <span class="box2-list-date">01-18</span>
                    </li>
                  </ul>
                </div>
                <ul style="overflow: hidden; height: 20px;">
                  <li class="box-index-t" style="left: 15px;"></li>
                  <li class="box-index-f" style="left: 45px;"></li>
                  <li class="box-index-f" style="left: 75px;"></li>
                </ul>
              </div>
              <div v-if="newsIndex===2" class="box2-content">
                <div style="position: relative; left: 13px; top: 10px;">
                  <img src="/index-imgs/box2-picture6.png" style="position: absolute;z-index: 100">
                  <div style="background-color: #67410f;height: 57px; width: 365px;position: absolute;top: 15px;z-index: 10">
                    <p class="box2-content-box">
                      【奥义对波】艺术就是（伤害）爆炸！虎牙平台赛开启报名！
                    </p>
                    <p style="color: #fff; margin: 0;position: absolute; right: 5px;bottom: 3px;font-size: 15px;">03-30</p>
                  </div>
                  <ul>
                    <li class="box2-list" style="top: 100px;">
                      <span class="box2-list-type">新闻</span>
                      <p class="box2-list-title">【奥义对波】场面有多炫，地板就有多惨</p>
                      <span class="box2-list-date">02-13</span>
                    </li>
                    <li class="box2-list" style="top: 140px;">
                      <span class="box2-list-type">新闻</span>
                      <p class="box2-list-title">【奥义对波】这些忍者送出的礼物你都收到了吗？</p>
                      <span class="box2-list-date">01-03</span>
                    </li>
                    <li class="box2-list" style="top: 180px;">
                      <span class="box2-list-type">新闻</span>
                      <p class="box2-list-title">平台团队赛-TGA冬季总决赛开赛在即，线上线下观赛赢好礼！</p>
                      <span class="box2-list-date">11-28</span>
                    </li>
                    <li class="box2-list" style="top: 220px;">
                      <span class="box2-list-type">新闻</span>
                      <p class="box2-list-title">晚饭吃点啥？就着决斗场秘卷操作“下饭”吧！</p>
                      <span class="box2-list-date">11-16</span>
                    </li>
                  </ul>
                </div>
                <ul style="overflow: hidden; height: 20px;">
                  <li class="box-index-f" style="left: 15px;"></li>
                  <li class="box-index-t" style="left: 45px;"></li>
                  <li class="box-index-f" style="left: 75px;"></li>
                </ul>
              </div>
              <div v-if="newsIndex===3" class="box2-content">
                <div style="position: relative; left: 13px; top: 10px;">
                  <img src="/index-imgs/box2-picture6.png" style="position: absolute;z-index: 100">
                  <div style="background-color: #67410f;height: 57px; width: 365px;position: absolute;top: 15px;z-index: 10">
                    <p class="box2-content-box">
                      【重燃盛典】2023年度总决赛双赛道冠军诞生！会场精彩瞬间不胜枚举！
                    </p>
                    <p style="color: #fff; margin: 0;position: absolute; right: 5px;bottom: 3px;font-size: 15px;">01-11</p>
                  </div>
                  <ul>
                    <li class="box2-list" style="top: 100px;">
                      <span class="box2-list-type">赛事</span>
                      <p class="box2-list-title">【奥义对波】帅气加倍！决斗场上的视觉盛宴</p>
                      <span class="box2-list-date">01-11</span>
                    </li>
                    <li class="box2-list" style="top: 140px;">
                      <span class="box2-list-type">赛事</span>
                      <p class="box2-list-title">【本周公告】永恒万花筒佐助即将上线，助力领佐助限定待机</p>
                      <span class="box2-list-date">01-05</span>
                    </li>
                    <li class="box2-list" style="top: 180px;">
                      <span class="box2-list-type">赛事</span>
                      <p class="box2-list-title">【活动爆料】永恒佐助高招活动“带”福利，年度总决赛观赛指南请查收！</p>
                      <span class="box2-list-date">01-05</span>
                    </li>
                    <li class="box2-list" style="top: 220px;">
                      <span class="box2-list-type">赛事</span>
                      <p class="box2-list-title">2024.1.2山城巅峰之战即将开战</p>
                      <span class="box2-list-date">01-02</span>
                    </li>
                  </ul>
                </div>
                <ul style="overflow: hidden; height: 20px;">
                  <li class="box-index-f" style="left: 15px;"></li>
                  <li class="box-index-f" style="left: 45px;"></li>
                  <li class="box-index-t" style="left: 75px;"></li>
                </ul>
              </div>
          </el-col>
        </el-row>
      </div>
      <div class="box2" style="height: 546px;">
        <img class="box-title" src="/index-imgs/box3-title.png" style="padding: 90px 0 30px">
        <div class="box3" style="width: 1275px; height: 100%;margin: 0 auto; position: relative;">
          <div class="box3-title" style="position: absolute; top: 45px; left: 50%;transform: translate(-50%);"></div>
          <ul class="box3-ul-t" style="position: absolute;top: 90px;left: 180px;">
            <li>
                <img src="/index-imgs/box3-t1.png" style="">
                <i class="box3-t-s"></i>
                <p>火影忍者游戏介绍</p>
            </li>
            <li>
                <img src="/index-imgs/box3-t2.png" style="">
                <i class="box3-t-s"></i>
                <p>体力领取教学</p>
            </li>
            <li>
                <img src="/index-imgs/box3-t3.png" style="">
                <i class="box3-t-s"></i>
                <p style="">替身释放教学</p>
            </li>
            <li>
                <img src="/index-imgs/box3-t4.png" style="">
                <i class="box3-t-s"></i>
                <p>通灵/秘卷教学</p>
            </li>
          </ul>
          <div>
            <p class="box3-b-t" style="background-position: 0px -116px;left: 70px;"></p>
            <ul class="box3-b-l">
              <li style="left: 120px;top: 250px;">
                <div>
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-l1.png" style="border-radius: 10px">
                  </router-link>
                </div>
              </li>
              <li style="left: 250px;top: 250px;">
                <div>
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-l2.png" style="border-radius: 10px">
                  </router-link>
                </div>
              </li>
              <li style="left: 120px;top: 380px;">
                <div>
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-l3.png" style="border-radius: 10px">
                  </router-link>
                </div>
              </li>
              <li style="left: 250px;top: 380px;">
                <div>
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-l4.png" style="border-radius: 10px">
                  </router-link>
                </div>
              </li>
            </ul>
            <p class="box3-b-t" style="background-position: -47px -116px;left: 400px;"></p>
            <ul class="box3-b-l">
              <li style="left: 450px;top: 250px;">
                <div style="float: left">
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-r1.png" style="border-radius: 10px">
                  </router-link>
                </div>
                <p style="float: left;line-height: 106px">
                  <a href="" style="font-size: 18px;color: #67410f;">【精英剧情】</a>
                  <a href="" style="font-size: 18px;color: #67410f;">【冒险剧情】</a>
                </p>
              </li>
              <li style="top: 250px;left: 800px;">
                <div style="float: left">
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-r2.png" style="border-radius: 10px">
                  </router-link>
                </div>
                <p style="float: left;line-height: 106px">
                  <a href="" style="font-size: 18px;color: #67410f;"> 决斗场新忍秀</a>
                </p>
              </li>
              <li style="left: 450px; top: 380px;">
                <div style="float: left">
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-r3.png" style="border-radius: 10px">
                  </router-link>
                </div>
                <p style="float: left;line-height: 106px">
                  <a href="" style="font-size: 18px;color: #67410f;">【秘境探险】</a>
                  <a href="" style="font-size: 18px;color: #67410f;">【丰饶之间】</a>
                </p>
              </li>
              <li style="top: 380px;left: 800px;">
                <div style="float: left">
                  <router-link to="/xin">
                    <img src="/index-imgs/box3-b-r4.png" style="border-radius: 10px">
                  </router-link>
                </div>
                <p style="line-height: 106px; float: left">
                  <a href="" style="font-size: 18px;color: #67410f;">【免费忍者】这白嫖，多是一件美事！</a>
                </p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
#modular-1{
  height: 1610px;
  background: url("/public/index-imgs/bg1.jpg") no-repeat bottom center;
  margin-top: -90px;
  position: relative;
}
#modular-2{
  height: 100%;
  background: url("/public/index-imgs/bg2.jpg") no-repeat bottom center;
  background-position: 50% 0;
}
.box{
  background-image: url("/public/index-imgs/bgk.jpg");
  background-repeat: no-repeat;
}
.box-title{
  display: block;
  margin: 0 auto;
  width: 362px;
  height: 70px;
}
#date1{
  background-image: url("/public/index-imgs/box1-button2.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 263px;
  height: 136px;

}
#date2{
  background-image: url("/public/index-imgs/box1-button3.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  width: 263px;
  height: 136px;
}
ul{
  list-style: none;
  margin: 0;
  padding: 0;
}
.box2{
  width: 1350px;
  margin: 0 auto;
  position: relative;
}
.box2-tab{
  display: block;
  float: left;
  height: 32px;
  width: 101px;
  font-size: 18px;
  font-weight: bold;
  color: #67410f;
  text-align: center;
  line-height: 32px;
}
.box2-tab:hover, .box2-tab.active{
  background: url("/public/index-imgs/box2-picture5.png") no-repeat center/100%;
}
#box2-more{
  background: url("/public/index-imgs/box2-more.png");
  display: block;
  width: 47px;
  height: 20px;
  float: left;
  position: absolute;
  top: 5px;
  left: 80%;
}
.box2-content{
  border-top: 1px solid #67410f;
  position: absolute;
  width: 390px;
  height: 272px;
  top: 40px;
}
.box2-list{
  overflow: hidden;
  position: absolute;
  width: 365px;
}
.box2-list-type{
  float: left;
  background-color: #67410f;
  width: 52px;
  height: 22px;
  border-radius: 4px;
  text-align: center;
  line-height: 22px;
  color: #fff;
  margin-right: 5px;
  font-size: 14px;
}
.box2-list-title{
  color: #67410f;
  font-size: 14px;
  margin: 0;
  float: left;
  max-width: 230px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.box2-list-date{
  float: right;
  color: #67410f;
  font-size: 14px;
}
.box2-content-box{
  color: #fff;
  margin: 0;
  padding-right: 5px;
  position: absolute;
  left: 80px;
  top: 5px;
  font-weight: bold;
  font-size: 15px
}
/*--------------------------------------------*/
.box2-banner {
  position: relative;
  height: 100%;
  width: 100%;
  /*border: 1px solid red;*/
}
.indicator {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 99;
}
.indicator a {
  font-size: 12px;
  color: grey;
  display: block;
  float: left;
  width: 25%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
}
.indicator a.active {
  color: #fff;
}
/*--------------------------------------------*/
.box-index-t{
  background-image: url("/public/index-imgs/box2-index-p.png");
  width: 15px;
  height: 20px;
  background-position: -32px 0px;
  display: block;
  position: absolute;
  top: 280px;
}
.box-index-f{
  background-image: url("/public/index-imgs/box2-index-p.png");
  width: 15px;
  height: 20px;
  background-position: 47px 20px;
  display: block;
  position: absolute;
  top: 280px;
}
.box3{
  background-image: url("/public/index-imgs/box3-bg.jpg");
  background-repeat: no-repeat;
}
.box3-title{
  background-image: url("/public/index-imgs/box3-title-collect.png");
  background-position: 0px -83px;
  width: 194px;
  height: 30px;
  text-align: center;
  margin: 0 auto;

}
.box3-t-s{
  background: url("/public/index-imgs/box3-title-collect.png") no-repeat;
  display: block;
  width: 30px;
  height: 34px;
  background-position: -296px -10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -65%);
  margin: 0;
}
.box3-ul-t li{
  float: left;
  position: relative;
  margin: 0 15px;
}
.box3-ul-t li p{
  font-size: 16px;
  color: #583302;
  text-align: center;
  margin: 0;
  font-weight: bold;
  z-index: 99;
}
.box3-ul-t li img{
  /*添加过渡让图片放大有个缓冲 注意：要加给元素本身，不要加给悬停*/
  transition: 1s;
  z-index: 10;
}
.box3-ul-t li img:hover{
  /*图片放大至原来的1.1倍*/
  transform: scale(1.1);
}
.box3-ul-t i{
  z-index: 99;
}
.box3-b-t{
  background-image: url("/public/index-imgs/box3-title-collect.png");
  width: 28px;
  height: 180px;
  text-indent: -9999px;
  padding: 0;
  margin-right: 20px;
  position: absolute;
  top: 270px;
}
.box3-b-l li{
  position: absolute;
}
.box3-b-l img{
  width: 106px;
  height: 106px;
}
a{
  text-decoration: none;
}
</style>
